<template>
  <div class="app-container">
    <div class="table-container">
      <el-table ref="productTable" :data="countList" style="width: 100%" @selection-change="handleSelectionChange" v-loading="countListLoading" border="">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column label="代理商" width="300" align="center">
          <template slot-scope="scope">{{scope.row.level | formatLevel}}</template>
        </el-table-column>
        <el-table-column label="数量" align="center">
          <template slot-scope="scope">{{scope.row.amount}}</template>
        </el-table-column>
        <el-table-column label="本月累积销售（元）" align="center">
          <template slot-scope="scope">￥{{scope.row.thisMonthSales}}</template>
        </el-table-column>
        <el-table-column label="人均月销售（元）" align="center">
          <template slot-scope="scope">￥{{scope.row.avgMonthSales}}</template>
        </el-table-column>
        <el-table-column label="本年累积销售（万元）" align="center">
          <template slot-scope="scope">￥{{scope.row.thisYearSales}}</template>
        </el-table-column>
        <el-table-column label="人均年销售（万元）" align="center">
          <template slot-scope="scope">{{scope.row.avgYearSales}}</template>
        </el-table-column>
        <el-table-column label="历年累积销售（万元）" align="center">
          <template slot-scope="scope">{{scope.row.allYearSales}}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="nav">
      <!--  订单状态:-->
      <ul class="tab-tilte">
        <li :class="item.id===navIndex?'active':''" v-for="item in navList" :key="item.id" @click="switchTab(item)">{{item.txt}}</li>
      </ul>
      <div class="btn-add">
        <el-button type="success" @click="handleAdd()" size="mini" style="height:40px;">新增代理商</el-button>
      </div>
    </div>
    <el-card class="filter-container" shadow="never" style="border:none!important;display:flex;">
      <el-form :inline="true" :model="listQuery" size="small">
        <el-form-item>
          <el-input v-model="listQuery.keywords" class="input-width" placeholder="请输入代理商姓名/手机号"></el-input>
        </el-form-item>
        <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>
      </el-form>
    </el-card>
    <div class="table-container">
      <el-table ref="productTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange" v-loading="listLoading" border="">
        <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column label="代理商姓名" align="center">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column label="手机" align="center">
          <template slot-scope="scope">{{scope.row.phone}}</template>
        </el-table-column>
        <el-table-column label="上月销售额" align="center">
          <template slot-scope="scope">{{scope.row.lastMonthSales}}</template>
        </el-table-column>
        <el-table-column label="本年累积销售" align="center">
          <template slot-scope="scope">{{scope.row.thisYearSales}}</template>
        </el-table-column>
        <el-table-column label="预计今年销售" align="center">
          <template slot-scope="scope">{{scope.row.preThisYearSales}}</template>
        </el-table-column>
        <el-table-column label="历年销售累计" align="center">
          <template slot-scope="scope">{{scope.row.allYearSales}}</template>
        </el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template slot-scope="scope">
            <p>
              <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <el-button size="mini" @click="handleShowProduct(scope.$index, scope.row)">查看详情</el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination background="" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper" :page-size="listQuery.pageSize" :page-sizes="[5,10,15]" :current-page.sync="listQuery.pageNum" :total="total"></el-pagination>
    </div>
    <!-- 新增代理商 -->
    <el-dialog title="新增代理商" :visible.sync="dialogVisible" width="40%">
      <el-form :model="agentVO" ref="productInfoForm" label-width="120px" size="small" class="el-form-table">
        <div class="detail_info-item">
          <el-form-item label="姓名" required prop="name">
            <el-input v-model="agentVO.name" style="width:217px"></el-input>
          </el-form-item>
          <el-form-item label="手机" required>
            <el-input v-model="agentVO.phone" placeholder="请输入内容" style="width:217px"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" required>
            <el-input v-model="agentVO.idCard" style="width:217px"></el-input>
          </el-form-item>
          <el-form-item label="城       市" required>
            <div>
              <li_area_select v-model="agentVO.defultAddress"></li_area_select>
              <!-- {{defultAddress}} -->
            </div>
          </el-form-item>
          <el-form-item label="级别" required>
            <el-select v-model="agentVO.level" @change="handleBrandChange" placeholder="请选择级别">
              <el-option v-for="item in levelOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
            <!-- <el-input v-model="value.level" aria-placeholder="如：盒/件/瓶/袋等"></el-input> -->
          </el-form-item>
          <el-form-item label="级别折扣" required>
            <el-input v-model="agentVO.discount " style="width:217px"></el-input>&nbsp;&nbsp;折
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  fetchCountList,
  fetchList,
  createAgent,
  updateAgent,
  updateDeleteStatus,
  updateNewStatus,
  updateRecommendStatus,
  updatePublishStatus
} from "@/api/agent";
import Li_area_select from "@/components/city/city.vue";
const defaultCountListQuery = {
  merchantId: 1
};

const defaultListQuery = {
  keywords: "",
  pageNum: 1,
  pageSize: 5,
  merchantId: 1,
  level: 1
};

const defaultAgentVO = {
  merchantId: 1,
  name: null,
  phone: null,
  defultAddress: {
    type: Object
  },
  idCard: null,
  // province :this.defultAddress.sheng,
  // city:this.defultAddress.shi,
  // region: this.defultAddress.qu,
  level: null,
  discount: null
};

export default {
  name: "productList",
  components: {
    Li_area_select
  },
  data() {
    return {
      value: Object,
      dialogVisible: false,
      // 默认省市区
      defultAddress: {
        sheng: "",
        shi: "",
        qu: ""
      },
      // form: {
      //   name: "",
      //   region: "",
      //   date1: "",
      //   date2: "",
      //   delivery: false,
      //   type: [],
      //   resource: "",
      //   desc: ""
      // },
      navList: [
        {
          id: 1,
          txt: "一级代理",
          level: "1"
        },
        {
          id: 2,
          txt: "二级代理",
          level: "2"
        },
        {
          id: 3,
          txt: "三级代理",
          level: "3"
        },
        {
          id: 4,
          txt: "特殊代理",
          level: "0"
        }
      ],
      navIndex: 1,
      operateType: null,
      countListQuery: Object.assign({}, defaultCountListQuery),
      countList: null,
      countListLoading: true,
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: true,
      selectProductCateValue: null,
      multipleSelection: [],
      productCateOptions: [],
      agentVO: Object.assign({}, defaultAgentVO),
      isEdit: false,
      //记录省市县
      provinceList: [],
      dataprovinceList: [],
      provinceCode: "",

      cityList: [],
      datacityList: [],
      cityCode: "",

      countryList: [],
      datacountryList: [],
      countryCode: "",

      levelOptions: [
        {
          name: "一级代理",
          value: "1"
        },
        {
          name: "二级代理",
          value: "2"
        },
        {
          name: "三级代理",
          value: "3"
        },
        {
          name: "特殊代理",
          value: "0"
        }
      ],
      publishStatusOptions: [
        {
          value: 1,
          label: "上架"
        },
        {
          value: 0,
          label: "下架"
        }
      ]
    };
  },
  created() {
    this.getList();
    this.getCountList();
    // this.getRoleList();
  },
  watch: {
    selectProductCateValue: function(newValue) {
      if (newValue != null && newValue.length == 2) {
        this.listQuery.productCategoryId = newValue[1];
      } else {
        this.listQuery.productCategoryId = null;
      }
    }
  },
  filters: {
    formatLevel(value) {
      if (value === "1") {
        return "一级代理商";
      } else if (value === "2") {
        return "二级代理商";
      } else if (value === "3") {
        return "三级代理商";
      } else if (value === "0") {
        return "特殊代理商";
      } else {
        return "/";
      }
    }
  },
  methods: {
    // 导航切换
    switchTab(item) {
      this.navIndex = item.id;
      this.listQuery.level = item.level;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        if (response.code == 0) {
          if (response.data) {
            this.listLoading = false;
            this.list = response.data.list;
            this.total = response.data.total;
          }
        }
      });
    },
    getCountList() {
      this.countListLoading = true;
      fetchCountList(this.countListQuery).then(response => {
        if (response.code == 0) {
          if (response.data) {
            this.countListLoading = false;
            this.countList = response.data;
          }
        } else {
          this.countListLoading = true;
        }
      });
    },

    handleAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.agentVO = Object.assign({}, defaultAgentVO);
    },
    handleBrandChange() {},


    handleUpdate(index, row) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.agentVO = Object.assign({}, row);
    },

    handleDialogConfirm() {
      this.$confirm("是否要确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (this.isEdit) {
          updateAgent(this.agentVO).then(response => {
            this.$message({
              message: "修改成功！",
              type: "success"
            });
            this.dialogVisible = false;
            this.getList();
          });
        } else {
          createAgent(this.agentVO).then(response => {
            this.$message({
              message: "添加成功！",
              type: "success"
            });
            this.dialogVisible = false;
            this.getList();
          });
        }
      });
    },

    handleSearchEditSku() {
      fetchSkuStockList(this.editSkuInfo.productId, {
        keyword: this.editSkuInfo.keyword
      }).then(response => {
        this.editSkuInfo.stockList = response.data;
      });
    },

    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    // 新增代理商
    handleAddProduct() {},
    // 查看详情
    handleShowProduct(index, row) {
      this.$router.push({ path: "/kkg/detail", query: { id: row.id } });
    },
    // 编辑

    // 分页
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handlePublishStatusChange(index, row) {
      let ids = [];
      ids.push(row.id);
      this.updatePublishStatus(row.publishStatus, ids);
    },
    handleNewStatusChange(index, row) {
      let ids = [];
      ids.push(row.id);
      this.updateNewStatus(row.newStatus, ids);
    },
    handleRecommendStatusChange(index, row) {
      let ids = [];
      ids.push(row.id);
      this.updateRecommendStatus(row.recommandStatus, ids);
    },
    handleResetSearch() {
      this.selectProductCateValue = [];
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleDelete(index, row) {
      this.$confirm("是否要进行删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let ids = [];
        ids.push(row.id);
        this.updateDeleteStatus(1, ids);
      });
    },
    // handleUpdateProduct(index, row) {
    //   this.$router.push({ path: "/kkg/addProduct", query: { id: row.id } });
    // },

    // handleShowVerifyDetail(index, row) {
    //   console.log("handleShowVerifyDetail", row);
    // },
    handleShowLog(index, row) {
      console.log("handleShowLog", row);
    },
    updatePublishStatus(publishStatus, ids) {
      let params = new URLSearchParams();
      params.append("ids", ids);
      params.append("publishStatus", publishStatus);
      updatePublishStatus(params).then(response => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000
        });
      });
    },
    updateNewStatus(newStatus, ids) {
      let params = new URLSearchParams();
      params.append("ids", ids);
      params.append("newStatus", newStatus);
      updateNewStatus(params).then(response => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000
        });
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  background: #fff;
  min-height: 500px;

  .nav {
    display: flex;
    justify-content: space-between;
    justify-items: center;
    .tab-tilte {
      width: 50%;
      li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        width: 25%;
        padding: 10px 0;
        text-align: center;
        background-color: #f4f4f4;
        cursor: pointer;
      }
    }
    .btn-add {
      padding-top: 10px;
      box-sizing: border-box;
    }
    .tab-tilte .active {
      background-color: #09f;
      color: #fff;
    }
  }
}
</style>


